/**
 * Created by yhj on 2017/9/19.
 * tabbar界面
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Platform,
  StatusBar
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import  Home         from '../screens/home/HomeScreen';
import  Profile      from '../screens/game/GameScreen';
// import  Device       from '../main/device';
import  UserInfo       from '../screens/my/MeScreen';

export default class TabMain extends Component{
  constructor(props) {
    super(props);
      // this.state = {selectedTab:'my'}
    this.state = {selectedTab:'home'}
}

  render() {
    return (
    <View style={styles.container}>
        <StatusBar
            backgroundColor="#394f8b"
            barStyle="light-content"
        />
        <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tabbarViewStyle}>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title='首页'
            renderIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_home_normal.png')}/>}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_home_selected.png')}/>}
            onPress={() => this.setState({ selectedTab: 'home' })}
            selectedTitleStyle = {{color:'#394f8b'}}
            titleStyle = {{color:'#b2b4b8'}}
          >
            <Home navigator={this.props.navigator}/>
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === 'profile'}
              title='游戏'
              renderIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_game_normal.png')}/>}
              renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_game_selected.png')}/>}
              onPress={() => this.setState({ selectedTab:'profile' })}
              selectedTitleStyle = {{color:'#394f8b'}}
              titleStyle = {{color:'#b2b4b8'}}
          >
            <Profile navigator={this.props.navigator}/>
          </TabNavigator.Item>

          {/*<TabNavigator.Item*/}
              {/*selected={this.state.selectedTab === 'device'}*/}
              {/*title='设备'*/}
              {/*renderIcon={() => <Image style={styles.tabIcon} source={require('../image/tab/tas_device.png')}/>}*/}
              {/*renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('../image/tab/tas_device_select.png')}/>}*/}
              {/*onPress={() => this.setState({ selectedTab:'device' })}*/}
              {/*selectedTitleStyle = {{color:'#394f8b'}}*/}
              {/*titleStyle = {{color:'#b2b4b8'}}*/}
          {/*>*/}
            {/*<Device navigator={this.props.navigator}/>*/}
          {/*</TabNavigator.Item>*/}

          <TabNavigator.Item
              selected={this.state.selectedTab === 'my'}
              title='我的'
              renderIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_my_normal.png')}/>}
              renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('../../images/tab/tab_my_selected.png')}/>}
              onPress={() => this.setState({ selectedTab:'my' })}
              selectedTitleStyle = {{color:'#394f8b'}}
              titleStyle = {{color:'#b2b4b8'}}
          >
            <UserInfo navigator={this.props.navigator}/>
          </TabNavigator.Item>

        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
  },

  tabIcon: {
    // width:Platform.OS === 'ios'?28:25,
    // height:Platform.OS === 'ios'?28:25,
      width:Platform.OS === 'ios'?23:24,
      height:Platform.OS === 'ios'?25:24,
    // resizeMode: 'stretch',
    marginTop: 0,
  },

  tabbarViewStyle: {
      backgroundColor: 'white',
    // backgroundColor: '#575757',
    height:49,
  }

});
